<template>
    <div id="p_timeproject">
            <group>    
                <x-input v-model.trim="proCurrData.title" title="名称" required placeholder="必填" ></x-input>
                <!-- <x-input v-model="prokey" title="编号" placeholder="如z39time" ></x-input> -->
                <x-textarea v-model="proCurrData.desc" title="描述" placeholder="请填写详细信息" :show-counter="false" :rows="3"></x-textarea>
                <cell title="列表模式">
                    <button-tab slot="default" style="width: 240px;" >
                        <button-tab-item @on-item-click="changeMode(it)" :selected="it.value === showMode" :value="it" v-for="(it, index) in showModes" :key="index">{{it.name}}</button-tab-item>
                    </button-tab>
                </cell>
            </group>
            <group title="成员设置" >    
                <grid :cols="memberlist.length>2?5:0" class="noneList">
                  <grid-item @click.native="onMember(item)" :label="item.name" v-for="(item,index) in memberlist" :key="index">
                    <img slot="icon" :src="item.head||defaultHead">
                  </grid-item>
                </grid>
            </group>
            <box  gap="10px 10px">
                <flexbox>
                    <flexbox-item v-show="editType==1">
                      <x-button type="primary" @click.native="doProEdit">修改</x-button>
                    </flexbox-item>
                    <flexbox-item v-show="editType==1">
                      <x-button type="primary" @click.native="doProDel">删除</x-button>
                    </flexbox-item>
                    <flexbox-item v-show="editType==0">
                      <x-button type="primary" @click.native="doAddProject">添加</x-button>
                    </flexbox-item>
                    <flexbox-item>
                      <x-button type="warn" @click.native="doClose">返回</x-button>
                    </flexbox-item>
                </flexbox>
            </box>
            <invite v-on:toVisible="toVisible" :param="inviteObj" :show.sync="showInvite"></invite>
    </div>
</template>
<script>
import moment from "moment";
import _ from 'underscore' ;
import Invite from './Invite' ;

import api from '../api';
import axios from 'axios';
import { taskAndTag  } from "./mixin";


import {
    mapState,
    mapActions
} from 'vuex'

let projectNull = {title:"",key:"",desc:""} ;

import {
    Grid, GridItem,Tab,TabItem,Toast,XButton,Group,Cell,Box,XInput,XTextarea,Flexbox,FlexboxItem,
        ButtonTab,ButtonTabItem
} from 'vux'

export default {
    components: {
        Grid, GridItem,Tab,TabItem,Toast,XButton,Group,Cell,Box,XInput,XTextarea,Flexbox,FlexboxItem,
        ButtonTab,ButtonTabItem,Invite
    },
    mixins: [taskAndTag],    
    computed: {
        ...mapState({
            uid: state => state.vux.uid,
            proCurr: state => state.z39.proCurr,
            currMembers: state => state.z43.currMembers,
            addMembers: state => state.z43.addMembers,
            projectAddData: state => state.z39.projectAddData,
        })
    },
    activated(){
        this.initData() ;
    },
    created() {
        
    },
    mounted: function() {
        this.showMode = window.localStorage.getItem('project_mode'+ this.proCurrData.id) || 'default';
        // this.initData() ;
    },
    methods: {
        initData(){
            let title = "" ;
            if( _.isEmpty(this.$route.query.gid) ){
                this.editType = 0 ;
                title = "新增项目";
                this.proCurrData = Object.assign({},projectNull) ;
                let tempArr = [] ;
                this.addMembers.forEach((item,index)=>{
                    item.name = item.nname ;
                })
                this.memberlist = this.addMembers.concat( this.memberBtn ) ;
            }else{  
                this.editType = 1 ;
                this.gid = this.$route.query.gid ;
                title = "修改项目" ;
                this.proCurrData = Object.assign({}, this.proCurr) ;
                this.currMembers.forEach((item,index)=>{
                    item.name = item.nname || item.username ;
                })
                var news = this.memberBtn.concat(this.inviteBtn);
                this.memberlist = this.currMembers.concat(news) ;
                this.inviteObj = {gid:this.gid,uid:this.uid} ;
            }
            if( this.projectAddData != null && this.editType == 0 ){
                this.proCurrData = this.projectAddData ;
            }
            setTimeout(()=>{
                this.$store.commit({ type: "title" ,title:title } );
                this.setTitle(title);
            },10);
            // console.log("proCurrData",this.proCurrData);
        },
        doProDel(){
            this.projectDel( this.proCurrData.id ).then(data=>{
                history.go(-1);
            }) ;
        },
        doProEdit(){
            let old = Object.assign({}, this.proCurr) ;
            let newI = this.proCurrData ;
            if( old.title == newI.title && old.desc==newI.desc ) return this.$vux.toast.show({text:"无内容修改",type: 'warn'});
            this.projectSet( this.proCurrData );
        },
        doAddProject(){
            if( this.proCurrData.title.length == 0 ){
                return this.$vux.toast.show({text:"请输入名称",type: 'warn'});
            }
            let data = {title:this.proCurrData.title} ;
            data.desc = this.proCurrData.desc || "" ;
            data.members = this.addMembers ;
            _.each(data.members, (item)=>{ delete item.name});
            // data.key = this.prokey || "";
            this.projectAdd(data).then(data=>{
                this.$store.commit('z43/addMembers', {list: []}); //数据清空复原.
                this.$store.commit('z39/projectAddData', {project: null});
                history.go(-1);
            }) ;
        },
        resetInput(){
            this.proTitle="";
            this.prokey="";
            this.proDesc="";
        },
        onMember(item){
            let type ;
            if( item.key == "add" ){
                console.log("添加");
                type = this.editType == 1? "add":"new";
            }else if( item.key == "del" ){
                console.log("减少");
                type = "del"; 
                if( this.memberlist.length <= 3 ){  //如果没有用户,则直接进入添加成员
                    type = "add" ;
                    this.$vux.toast.show({text:"无成员可删",type: 'warn'});
                }
            }else if(item.key=="invite"){ //邀请
                console.log("邀请");
                type = "invite";
                this.showInvite = true;
                return ;
            }
            this.$store.commit('z39/projectAddData', {project: this.proCurrData});
            localStorage.setItem("importTime",new Date().getTime());
            if( this.editType == 0 ){ //新增
                this.go(`n_import`);
            }else{
                this.go(`n_import?gid=${this.gid}&type=${type}`);
            }
            // this.go("n_import/");
        },
        doClose(){
            this.$store.commit('z43/addMembers', {list: []}); //数据清空复原.            
            this.$store.commit('z39/projectAddData', {project: null});
            history.go(-1); //返回上一页
        },
        changeMode(it){
            console.log("changeMode:",it);
            if(this.showMode == it.value) return ;
            window.localStorage.setItem('project_mode' + this.proCurrData.id, it.value);
            this.showMode = it.value;
            this.$store.commit('z39/projectMode', {projectMode: this.showMode});
            // this.$vux.toast.show({text:"项目列表修改成功",type: 'success'});
            this.$vux.toast.text(`修改成功,返回查看`,'top');
        },
        toVisible(val){
            this.showInvite = val ;
            console.log("tovisible:",val);
        },
        ...mapActions([
            
        ])
    },
    data() {
        return {
            gid:"",    //和z43项目结合使用 group
            editType:0 ,
            proCurrData: projectNull,
            proTitle:"",
            prokey:"",
            proDesc:"",
            proIndex: 0,
            showMode:'default',  // user default project
            showModes:[{name:"默认",value:"default"},{name:"成员",value:"user"},{name:"部门",value:"project"}],
            defaultHead:"/static/z39h5/img/logo.png",
            memberlist:[], //{name:"张1",head:""},{name:"张2",head:""},{name:"张3",head:""},{name:"张4",head:""},{name:"张5",head:""},{name:"张6",head:""},{name:"张7",head:""},{name:"张8",head:""},
            rowNum:5 ,
            showInvite:false,
            inviteObj:null,
            memberBtn:[{name:"添加",head:"/static/z39h5/img/add.png",key:"add"},{name:"删除",head:"/static/z39h5/img/reduce.png",key:"del"}] ,
            inviteBtn:[{name:"邀请",head:"/static/z39h5/img/invite.png",key:"invite"}]
        }
    }
}

// var memberBtn=[{name:"添加",head:"/static/z39h5/img/add.png",key:"add"},{name:"删除",head:"/static/z39h5/img/reduce.png",key:"del"}] ;
// var inviteBtn ={name:"邀请",head:"/static/z39h5/img/invite.png",key:"invite"};
</script>
<style scoped>

</style>
<style>


#p_timeproject .weui-grids .weui-grid__icon{width: 50px;height: 50px;}
#p_timeproject .weui-grids>a {padding: 4px 4px;width: 54px;min-height: 82px;}
#p_timeproject .weui-grid:before,.weui-grid:after{border-bottom:0;border-right:0;}

</style>
